<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="450px"
      :before-close="cancel"
      @open="open"
      append-to-body
    >
      <div>
        <el-descriptions
          class="margin-top"
          direction="veritical"
          :column="2"
          border
        >
          <el-descriptions-item :span="3">
            <template slot="label">
              <i class="el-icon-user" />
              选择价格
            </template>
            <el-input
              type="number"
              @input="limitInput($event, 'price')"
              v-model.trim="form.price"
              ><template slot="append">{{
                priceInfo.bidUnit
              }}</template></el-input
            >
          </el-descriptions-item>

          <el-descriptions-item :span="3">
            <template slot="label">
              <i class="el-icon-office-building" />
              可供数量
            </template>
            <el-input type="number" :min="0" v-model.trim="form.tenderProvide">
              <template slot="append">{{
                provideUnit
              }}</template></el-input
            >
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    priceInfo: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {},
    },
    title: {
      type: String,
      default: "",
    },
    index: {
      type: Number,
      default: 0,
    },
    // departmentList: {
    //   type: Array,
    //   // eslint-disable-next-line vue/require-valid-default-prop
    //   default: []
    // }
  },
  data() {
    return {
      form: {
        price: "",
        tenderProvide: "",
      },
      provideUnit: "",
    };
  },
  methods: {
    
    open() {
      console.log("12121:",this.priceInfo);
      this.form = this.priceInfo;
      this.provideUnit = this.priceInfo.bidUnit.replace("/元","");
    },
    initForm() {
      this.form = {
        price: "",
        tenderProvide: "",
      };
    },
    cancel() {
      this.$emit("cancel");
      this.initForm();
    },
    ok() {
      const data = {
        competeId: this.priceInfo.id,
        bid: this.form.price+this.priceInfo.bidUnit,
        provide: this.form.tenderProvide+this.priceInfo.bidUnit.replace("/元",""),
        supplierId: this.priceInfo.supplierId,
        accountId: this.$store.getters.accountId,
        tenderId: this.priceInfo.tenderId,
        productId: this.priceInfo.productId,
      };
      this.$emit("ok", data);
      this.initForm();
    },
    limitInput(value, name) {
      this.form[name] =
        ("" + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || ""; // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
    },
  },
};
</script>

<style>
</style>
